<template>
	<view class="zy-column-full">
		<y-title title="发布旅游"></y-title>
		
		<scroll-view class="zy-scroll"  scroll-y>
			<view>
				<y-form-item label="擅长特长">
					<input v-model="form.genius" placeholder="请输入擅长特长" placeholder-class='place'/>
				</y-form-item>
				<y-form-item label="旅游签名">
					<input v-model="form.sign" placeholder="请输入旅游签名" placeholder-class='place'/>
				</y-form-item>
				<y-form-item label="价格">
					<input v-model="form.money" placeholder="请输入价格" type="number" placeholder-class='place'/>
				</y-form-item>
				<y-form-item label="擅长景点">
					<input v-model="form.scenic" placeholder="请输入擅长景点" placeholder-class='place'/>
				</y-form-item>
				<y-form-item label="可选位置">
					<input v-model="form.area" placeholder="请输入可选位置" placeholder-class='place'/>
				</y-form-item>
			</view>
			
			<view class="photo"  @click="onPhotoTip">
				<uni-file-picker limit="9" title="打卡景点" @select="selectPhoto" @delete="deletePhoto" ref="files"
					:auto-upload="false" :value="photos" :disabled="disabledPhoto"></uni-file-picker>
			</view>
		</scroll-view>
		
		<y-button class="zy-m-lg" content="发布" @click="onRelease"></y-button>
	</view>
</template>

<script lang="ts" setup>
	import { uploadOSS } from '@/common/oos/oss'
	import RouteUtil from '@/common/RouteUtil';
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app"
	
	const form = ref({
		genius: '1',
		sign: '2',
		money: '3',
		area: '4',
		scenic: '5',
		tripPicId:''
	})
	const photos = ref([])
	const disabledPhoto = ref(true)
	
	onLoad(()=>{
		if(uni.getStorageSync('carmeraGame')){
			disabledPhoto.value = false;
		}
	})
	
	const onPhotoTip = ()=>{
		if(disabledPhoto.value){
			uni.showModal({
				content:'相机，录制视频，存储权限使用说明：用于上传打卡景点图片等场景。',
				success: res=>{
					if(res.confirm){
						uni.setStorageSync('carmeraGame', true);
						disabledPhoto.value = false;
					}
				}
			})
		}
	}
	
	const selectPhoto = (event)=>{
		event.tempFilePaths.forEach((file) => {
			console.log("file: " + JSON.stringify(file));
			let dir = 'trip'
			uploadOSS(dir, file).then((res)=>{
				requestFilePhoto(dir, res.fileName, res.picUrl)
			})
			// const { success, data, fileName } = await uploadOSS(dir, file.tempFilePaths[0])
			// console.log("success: " + success);
			// console.log("data: " + data);
			// console.log("fileName: " + fileName);
			// if (success) {
			// 	requestFilePhoto(dir, fileName, data, event.tempFilePaths.length)
			// } else {
			// 	uni.$toast.showToast(data)
			// }
		});
	}
	
	const requestFilePhoto = (pathKey, fileNameKey, picUrl)=>{
		let params = {
			pathKey: pathKey,
			userIdKey: uni.getStorageSync('userId'),
			fileNameKey: fileNameKey
		}
		uni.$http.post('/api/ossSts/callBackFiInfo', params).then(res=>{
			photos.value.push({
				url: picUrl,
				id: res.data
			});
		})
	}
	
	const deletePhoto = (event)=>{
		photos.value = photos.value.filter(item => {
			return item.url !== event.tempFilePath;
		})
	}
	
	const onRelease = ()=>{
		if('' == form.value.genius){
			uni.$toast.showToast('请输入擅长特长')
			return
		}
		if('' == form.value.sign){
			uni.$toast.showToast('请输入旅游签名')
			return
		}
		if('' == form.value.money){
			uni.$toast.showToast('请输入价格')
			return
		}
		if('' == form.value.scenic){
			uni.$toast.showToast('请输入擅长景点')
			return
		}
		if('' == form.value.area){
			uni.$toast.showToast('请输入可选位置')
			return
		}
		if(photos.value.length == 0){
			uni.$toast.showToast('请选择图片')
			return
		}
		
		let tripPicId = '';
		photos.value.forEach(item => {
			if(tripPicId == ''){
				tripPicId = item.id;
			}else{
				tripPicId += ',' + item.id;
			}
		});
		form.value.tripPicId = tripPicId;
		uni.$http.post('/api/apiAppTrip/sendAppTrip', form.value).then(res=>{
			uni.$toast.showToast('发布成功')
			RouteUtil.back()
		})
	}
	
</script>

<style lang="scss" scoped>
	.parent{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	
	.form {
		background-color: #fff;
		padding: 30rpx;
	}
	
	.photo{
		// background-color: #fff;
		margin: 30rpx 0;
		padding: 30rpx;
		color: #8a8a8a;
	}
	
	.bottom {
		margin: 30rpx;
		box-sizing: border-box;
		background-image: linear-gradient(to right, #9fe9ff, #ab7aff);
		border-radius: 40rpx;
		width: 100wh;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color:white;
	}
	
	.place{
		font-size: 28rpx;
		color: #555;
	}
	input{
		color: #fff;
	}
</style>
